<template>
	<view class="big">
		<view class="kong"></view>
		<view class="top">
			<view class="flexs1">
				<image class="back_img" src="../../static/image/ico_dh_bk@2x.png" @click="back"></image>
				<view class="top_kuang flexs1">
					<image class="border_serch" src="../../static/image/ico_ss@2x.png" mode=""></image>
					<input type="text" placeholder-style="font-size: 28rpx; color:#999999;" placeholder="输入真题、资料、公司名称" 
					v-model="name"  @confirm='searchinput'>
					<image class="close_img" src="../../static/image/ico_gb@2x.png" @click="clear"></image>
				</view>
			</view>
			<view class="lei_box flexs3">
				<view :class="state==1?'lei_title_new':'lei_title'" @click="choose(1)">文章</view>
				<view :class="state==2?'lei_title_new':'lei_title'" @click="choose(2)">课程</view>
				<view :class="state==3?'lei_title_new':'lei_title'" @click="choose(3)">试卷</view>
				<view :class="state==4?'lei_title_new':'lei_title'" @click="choose(4)">名企</view>
				<view :class="state==5?'lei_title_new':'lei_title'" @click="choose(5)">问答</view>
			</view>
			<scroll-view scroll-y="true"  @scrolltolower='onpullresh' :refresher-triggered="triggered"
		 @refresherrefresh="onRefresh" @refresherrestore="onRestore" @refresherabort="stoprefresh"
		 refresher-enabled='true' :refresher-threshold="50" refresher-background="#f7f7f7" >
				<!-- 搜索结果为空样式 -->
				<block v-if="state==1">
					<view class="none_box" v-if='articlelist.length == 0'>
						<view class="none_kong"></view>
						<image src="../../static/image/zcht_img_k@2x.png"></image>
						<view>暂无信息</view>
					</view>
					<view class="list_one flexs1" v-for="(item,index) in articlelist" :key="'1'+index" @click='goarticledetail(item.id,item.type)'>
						<image class="one_img" :src="picture.getImgUrl(item.image)"></image>
						<view class="list_one_right">
							<view class="one_title text-bold">{{item.name}}</view>
							<view class="one_time">{{item.createtime}}</view>
						</view>
					</view>
				</block>
				<block v-if="state==2">
						<view class="none_box" v-if="kechenglist.length==0">
							<view class="none_kong"></view>
							<image src="../../static/image/zcht_img_k@2x.png"></image>
							<view>暂无信息</view>
						</view>
					<view class="list_two flexs1" v-for="(item,index) in kechenglist" :key="'2'+index" @click='gokecheng(item.id)'>
						<view class="two_left">
							<image class="one_img" :src="picture.getImgUrl(item.image)"></image>
							<view class="type_box" v-show="item.type==2">面试</view>
							<view class="type_box" v-show="item.type==1">笔试</view>
						</view>
						<view class="list_two_right">
							<view class="two_title text-bold">{{item.name}}</view>
							<view class="remen_right_mid flexs1">
								<image src="../../static/image/ss_ico_xx@2x.png"></image>
								<view>{{item.buy_num}}人已学习</view>
							</view>
							<view class="flexs2 two_right">
								<view class="tao_num">{{item.qb_count}}套真题</view>
								<view class="money"><text class="fuhao">￥</text>{{item.now_price}}</view>
							</view>
						</view>
					</view>
				</block>
				<block v-if="state==3">
					<view class="none_box" v-if='hottextpaperlist.length == 0'>
						<view class="none_kong"></view>
						<image src="../../static/image/zcht_img_k@2x.png"></image>
						<view>暂无信息</view>
					</view>
					<view class="creditbox" v-for="(item,index) in hottextpaperlist" :key="'3'+index" @click='gopaperdetail(item.id,item.is_buy)'>
						<view class="chapterbox text-bold">{{item.name}}</view>
						<view class='secondview'>
							<view class='studentbox'>
								<image class='studenter' src='../../static/image/ss_ico_xx@2x.png'></image>
								<view>{{item.answer_num}}人已学习</view>
							</view>
							<view class='timebox'>
								<image class='clocker' src='../../static/image/sjxq_ico_sj@2x.png'></image>
								<view>答题时长:  {{item.answer_time}}分钟</view>
							</view>
						</view>
					</view>
				</block>
				<block v-if="state==4">
					<view class="none_box" v-if='companylist.length == 0'>
						<view class="none_kong"></view>
						<image src="../../static/image/zcht_img_k@2x.png"></image>
						<view>暂无信息</view>
					</view>
					<view class="list_four" v-for="(item,index) in companylist" :key="'4'+index" @click='gocompanydetail(item.id)'>
						<view class="list_fourleft">
							<image class='one_img' :src='picture.getImgUrl(item.image)'></image>
						</view>
						<view class='list_fourright'>
							<view class='titltname'>{{item.name}}</view>
							<view v-html="item.analysis"><!-- {{item.analysis}} --></view>
							<!-- <view class='sameclass'>校招时间:每年3-5月，9-11月</view>
							<view classzz='sameclass'>社招时间:时间不定</view>
							<view class='sameclass'>笔试形式:笔试</view>
							<view class='specialbox  sameclass'>测试题型:EPI阿斯蒂芬阿莎第三方昂范德萨水电费撒地方噶水电费阿萨德股份三</view> -->
						</view>
					</view>
				</block>
				<block v-if="state==5">
					<view class="none_box" v-if='answerlist.length == 0'>
						<view class="none_kong"></view>
						<image src="../../static/image/zcht_img_k@2x.png"></image>
						<view>暂无信息</view>
					</view>
					<view class='list_five' v-else>
						<view class='zombietitle'>问题列表({{answerlist.length}})</view>
						<view class='list_fiveitem' v-for="(item,index) in answerlist" :key="'5'+index" @click='goquestiondetail(item.id)'>
							<view class='zombieimg'>{{item.class_name}}</view>
							<view class='contentzombie'>
								{{item.content}}
							</view>
							<view class='zombietime'>{{item.time_info}}</view>
						</view>
					</view>
				</block>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {create,
askShow,
recSearch,
comShow,
queShow,
CurShow} from '@/api/index.js'
	export default {
		data() {
			return {
				state: 1,
				name: '',
				
				// 下拉按钮状态显示与否
				triggered: false,
				// 下拉按钮防抖
				freshing: '',
				
				page:1,
				limit:10,
				articlelist:[],//文章列表
				
				kechengpage:1,
				kechenglimit:10,
				kechenglist:[],//课程列表
				
				hottextpaperpage:1,
				hottextpaperlimit:10,
				hottextpaperlist:[],//试卷列表
				
				companypage:1,
				companylimit:10,
				companyresize:0,
				companylist:[],//名企列表
				
				answerpage:1,
				answerlimit:10,
				answerresize:0,
				answerlist:[],//问答列表
				orderSn:'',
				price:'',
				ordernum:'',
			}
		},
		onLoad() {
			// this._getarticlelist() //默认获取文章
		},
		methods: {
			goarticledetail(id,type){
				// 文章分类:1=招聘资讯，2=时政热点，3=经验技巧
				if(type ==1){
					uni.navigateTo({
						url:'../news/news_det?id='+id
					})
				}else if(type == 2){
					uni.navigateTo({
						url:'politics_det?id='+id
					})
				}else{
					uni.navigateTo({
						url:'experience_det?id='+id
					})
				}
			},
			gocompanydetail(id){//去公司详情
				uni.navigateTo({
					url:'../Kaoq/Famous_Det?id='+id
				})
			},
			goquestiondetail(id){
				uni.navigateTo({
					url:'../askquestion/answerquestiondetail?id='+id
				})
			},
			gokecheng(id){
				uni.navigateTo({
					url:'../data/kecheng?id='+id
				})
			},
			gopaperdetail(id,is_buy){//去做题详情
				if(is_buy==1){
					uni.navigateTo({
						url:'../Brush/testDetL?id='+id
					})
				}else{
					var obj = {
						type:2,
						q_id:id
					};
					create(obj).then(res => {
						if (res.code == 1) {
							this.ordernum=res.data.id
							this.price=res.data.price
							this.orderSn=res.data.order_sn
								uni.navigateTo({
									url:'../payment/payment_other?oid='+this.ordernum+'&price='+this.price+'&id='+id+'&orderSn='+this.orderSn
								})
						}
					});
				}
			},
			// 上拉触底刷新
			onpullresh() {
				console.log('上拉触底')
				switch(this.state){
					case 1:
						this._getarticlelist()
					break;
					case 2:
						this._getlist();
					break;
					case 3:
						this._gethottextpaperlist()
					break;
					case 4:
						if(this.companyresize != 0){
							this.companypage++
							this._getcompanylist()
						}
					break;
					case 5:
						if(this.answerresize != 0){
							this.answerpage++
							this._getanswerlist()
						}
					break;
				}
				
			},
			// 自定义下拉触发
			onRestore() {
				//this.triggered = 'restore'; // 需要重置
				this.triggered = false; // 需要重置
			},
			onRefresh() {
				var that = this
				if (this.freshing) return;
				//this.jiajianstatus = false//上拉触底改变状态，正常加载
				
				// 下拉刷新只有公司和问答有page,文章,课程,试卷没有
				switch(this.state){
					case 1:
						this._getarticlelist()
					break;
					case 2:
						this._getlist();
					break;
					case 3:
						this._gethottextpaperlist()
					break;
					case 4:
						this.companypage = 1
						this._getcompanylist()
					break;
					case 5:
						this.answerpage = 1
						this._getanswerlist()
					break;
				}
				
				this.freshing = true;
				if(!this.triggered){
					this.triggered = true
				}
					setTimeout(() => {
						that.triggered = false;
						that.freshing = false;
					}, 1000)
			},
			stoprefresh() {
			
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			searchinput(){//搜索，判断是在那个状态下搜索
			this._getarticlelist()
			this._getlist()
			this._gethottextpaperlist()
			this._getcompanylist()
			this._getanswerlist()
				// switch(this.state){
				// 	case 1:
				// 		this._getarticlelist()
				// 	break;
				// 	case 2:
				// 		this._getlist();
				// 	break;
				// 	case 3:
				// 		this._gethottextpaperlist()
				// 	break;
				// 	case 4:
				// 		this._getcompanylist()
				// 	break;
				// 	case 5:
				// 		this._getanswerlist()
				// 	break;
				// }
			},
			_getanswerlist(){//获取问答
				let obj = {
					search:this.name,
					page:this.answerpage,
					pageSize:this.answerlimit
				}
				askShow(obj).then(res=>{
					if(res.code == 1){
						this.answerresize = res.data.length
						if(this.answerpage == 1){
							this.answerlist = res.data
						}else{
							this.answerlist = this.answerlist.concat(res.data)
						}
					}else{
						this.$msg(res.msg)
					}
				})
			},
			_getarticlelist(){//获取文章
				let obj = {
					search:this.name
				}
				recSearch(obj).then(res=>{
					if(res.code == 1){
						if(this.page == 1){
							this.articlelist = res.data
						}else{
							this.articlelist = this.articlelist.concat(res.data)
						}
					}else{
						this.$msg(res.msg)
					}
				})
			},
			_getcompanylist(){//获取名企
				let obj = {
					search:this.name,
					page:this.companypage,
					pageSize:this.companylimit
				}
				comShow(obj).then(res=>{
					if(res.code == 1){
						this.companyresize = res.data.length
						if(this.companypage == 1){
							this.companylist = res.data
						}else{
							this.companylist = this.companylist.concat(res.dat)
						}
					}else{
						this.$msg(res.msg)
					}
				})
			},
			_gethottextpaperlist(){//获取试卷
				let obj = {
					search:this.name,
					is_hot:1
				}
				queShow(obj).then(res=>{
					if(res.code == 1){
						this.hottextpaperlist = res.data
					}else{
						this.$msg(res.msg)
					}
				})
			},
			_getlist(){//获取课程
				let obj = {
					is_hot:'',
					is_index:'',
					search:this.name,
					type:'',
					id_good:'',
					page:'',
					pageSize:'',
				}
				CurShow(obj).then(res=>{
					if(res.code == 1){
						this.kechenglist = res.data
					}else{
						this.$msg(res.msg)
					}
				})
			},
			choose(state) {
				this.state = state
				// if(state=='3'){
				// 	this._gethottextpaperlist()
				// }
				// if(state=='2'){
				// 	this._getlist()
				// }
				// if(state=='4'){
				// 	this._getcompanylist()
				// }
				// if(state=='5'){
				// 	this._getanswerlist()
				// }
				// if(state=='1'){
				// 	this._getarticlelist()
				// }
			},
			clear() {
				this.name = ''
			}
		}
	}
</script>

<style>
	.big {
		width: 100vw;
		height: 100vh
	}
	.top {
		width: 100%;
		height: 170rpx;
		background-color: #FFFFFF;
		padding-top: 16rpx
	}

	.back_img {
		width: 20rpx;
		height: 36rpx;
		margin: 0 20rpx 0 30rpx;
	}

	.top_kuang {
		width: 650rpx;
		height: 60rpx;
		background: #F5F5F5;
		border-radius: 10rpx;

	}

	.border_serch {
		width: 28rpx;
		height: 30rpx;
		margin: 0 20rpx 0 25rpx
	}

	uni-input {
		width: 520rpx;
	}

	.close_img {
		width: 26rpx;
		height: 26rpx;
	}

	.lei_box {
		width: 100%;
		height: 60rpx;
		/*#ifdef APP-PLUS*/
		margin-top: 20rpx;
		/* #endif */
		margin-top: 26rpx;
	}

	.lei_title {
		width: 70rpx;
		height: 30rpx;
		line-height: 30rpx;
		font-size: 30rpx;
	}

	.lei_title_new {
		width: 66rpx;
		height: 42rpx;
		line-height: 30rpx;
		font-size: 32rpx;
		font-weight: bold;
		border-bottom: 2px solid #FFDD47;
	}

	.list_box {
		width: 100%;
		height: calc(100vh - 170rpx);
		padding-top: 20rpx;
		margin-top: 10rpx;
		/* border:1px solid red */
	}

	.none_box {
		width: 100%;
		height: 520rpx;
		font-size: 26rpx;
		color: #666666;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.none_kong {
		width: 100%;
		height: 168rpx;
	}

	.none_box image {
		width: 354rpx;
		height: 253rpx;
	}

	.list_one {
		width: 100%;
		height: 192rpx;
		background-color: #FFFFFF;
	}

	.one_img {
		width: 196rpx;
		height: 130rpx;
		border-radius: 10rpx;
		margin: 0 21rpx 0 29rpx
	}

	.list_one_right {
		width: 465rpx;
		height: 192rpx;
		padding-top: 26rpx;
		border-bottom: 1px solid #F5F5F5
	}

	.one_title {
		width: 100%;
		height: 94rpx;
		line-height: 42rpx;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;

	}

	.one_time {
		color: #999999;
		font-size: 24rpx;
	}

	.list_two {
		width: 100%;
		height: 210rpx;
		/* border-bottom: 1rpx solid red; */
		background-color: #FFFFFF;
	}

	.two_left {
		position: relative;
	}

	.type_box {
		width: 70rpx;
		height: 30rpx;
		line-height: 30rpx;
		text-align: center;
		color: #FFF;
		background: #FF3B30;
		border-radius: 10rpx 0rpx 10rpx 0rpx;
		font-size: 22rpx;
		position: absolute;
		top: 0rpx;
		left: 28rpx
	}

	.list_two_right {
		width: 465rpx;
		height: 210rpx;
		padding-top: 26rpx;
		border-bottom: 1px solid #F5F5F5
	}

	.remen_right_mid {
		height: 40rpx;
		font-size: 24rpx;
		color: #666666;
	}

	.remen_right_mid image {
		width: 28rpx;
		height: 26rpx;
		margin-right: 10rpx
	}

	.money {
		width: 124rpx;
		font-size: 34rpx;
		font-weight: bold;
		color: #FF3B30;
	}

	.fuhao {
		font-size: 24rpx;
	}

	.tao_num {
		font-size: 20rpx;
		color: #999999;
	}

	.two_title {
		width: 100%;
		height: 80rpx;
		line-height: 38rpx;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
	}


	.two_right {
		width: 94%;
	}

	/* 名企样式 */
	.list_four {
		width: 100%;
		height: auto;
		/* height:210rpx; */
		/* border: 1rpx solid red; */
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		padding-top: 30rpx;
		/* padding-bottom: 30rpx; */
		
	}

	.list_fourleft {}

	.list_fourright {
		height: auto;
		width: 66%;
		/* height:210rpx; */
		/* padding-top: 26rpx; */
		padding-bottom: 30rpx;
		border-bottom: 1px solid #F5F5F5;
	}

	.titltname {
		font-size: 26rpx;
		font-weight: 600;
		margin-bottom: 10rpx;
	}
	.sameclass{
		height:36rpx;
		line-height: 36rpx;
		font-size: 26rpx;
	}
	.specialbox {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	/* 问答 */
	.list_five{
		width:100%;
		padding:0 30rpx;
		background-color: #FFFFFF;
		padding-bottom: 20rpx;
	}
	.zombietitle{
		height:80rpx;
		line-height: 80rpx;
		color: #666666;
	}
	.list_fiveitem{
		height:auto;
		width:100%;
		/* border:1rpx solid #EEEEEE; */
		border:1rpx solid transparent;
		border-radius: 10rpx;
		
		box-shadow: 0px 2px 10px 0px rgba(15, 11, 2, 0.13);
		position:relative;
		padding: 20rpx 0rpx;
		display: flex;
		flex-direction:column;
		margin-bottom: 20rpx;
	}
	.zombieimg{
		position:absolute;
		top:0;
		right:0;
		width:90rpx;
		height:36rpx;
		line-height: 36rpx;
		text-align: center;
		font-size: 26rpx;
		border-bottom-left-radius: 10rpx;
		border-top-right-radius: 10rpx;
		background-color: #FA3A2B;
		/* background-image: url(../../static/image/ss_img_wd_bg@2x.png);
		background-position: 100% 100%;
		background-repeat: no-repeat; */
		color:#FFFFFF;
		line-height: 36rpx;
		text-align: center;
	}
	.contentzombie{
		overflow:hidden;
		/* border:1rpx solid red; */
		text-overflow:ellipsis;
		width:533rpx;
		height:auto;
		line-height: 45rpx;
		/* padding: 10rpx 0; */
		padding-left: 20rpx;
		padding-bottom: 8rpx;
		display:-webkit-box; 
		-webkit-box-orient:vertical;
		-webkit-line-clamp:2;
	}
	.zombietime{
		padding-left: 20rpx;
		height:40rpx;
		line-height: 40rpx;
		width:610rpx;
		color:#B6B6B6;
	}
	
	
	/* 试卷里样式 */
	.creditbox{
		height:140rpx;
		width:100%;
		background-color: #FFFFFF;
	}
	/* 这里不用两行超出隐藏 */
	.chapterbox{
		height:80rpx;
		line-height:80rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		width:calc(100% - 60rpx);
		margin:0 auto;
	}
	.secondview{
		width:calc(100% - 60rpx);
		margin:0 auto;
		height:60rpx;
		padding-bottom: 20rpx;
		border-bottom:1rpx solid #F5F5F5;
		display: flex;
		align-items: center;
		color:#656565;
	}
	.studentbox{
		display: flex;
		align-items: center;
		margin-right: 30rpx;
		
	}
	.studenter{
		width:28rpx;
		height:26rpx;
		margin-right: 10rpx;
	}
	.timebox{
		align-items: center;
		display: flex;
	}
	.clocker{
		margin-right: 10rpx;
		width:22rpx;
		height:26rpx;
	}
</style>
